

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点光源</title>
</head>
<body>
    <script src="./three.js"></script>
    <script>
        var clipPlane = [
            // 延yoz平面切割
            new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, 0, -1), 0),
        ];
        var scene = null;
        var camera = null;
        var renderer = null;
        var sphere = null;
        var light = null;
        var lightSphere = null;
        // 初始化函数
        function init () {
            // 场景
            scene = new THREE.Scene();
            // 相机
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 1000);
            camera.position.z = 100;

            camera.position.y = 50;
            // camera.position.y = -10;
            // 渲染器
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.localClippingEnabled = true;
            // renderer.setClearColor(0xffffff);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.shadowMap.autoUpdate = true;
            renderer.shadowMap.needsUpdate = true;
            document.body.appendChild(renderer.domElement);
            var geometry = new THREE.BoxGeometry(30, 30, 30);
            var boxMaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
            var cube = new THREE.Mesh(geometry, boxMaterial);
            var lightGeometry = new THREE.SphereBufferGeometry(2, 40, 40);
            var lightMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});
            lightSphere = new THREE.Mesh(lightGeometry, lightMaterial);
            var deg = 0;
            // lightSphere.position.set(30 * Math.cos(deg * Math.PI / 180),  0 , 30 * Math.sin(deg * Math.PI / 180))
            // scene.add(lightSphere);
            cube.position.y = -30;
            geometry.receiveShadow = true;
            // scene.add(cube);
            sphere = createSphereGeometry(10);
            sphere.castShadow = true;
            scene.add(sphere);
            
            
            var amblight = new THREE.AmbientLight( 0xffffff, 1 ); // soft white light
            console.log(amblight.isLight)
            scene.add( amblight );
            // var directionalLight = new THREE.DirectionalLight( 0xff0000, 0.5 );
            // scene.add( directionalLight );
            // directionalLight.position.set(0, 0, 1);
            // console.log(directionalLight);
            // var light = new THREE.HemisphereLight( 0xff0000, 0x00ff00, 1 );
            // light.position.set(-1, 0, 0);
            // scene.add( light );
            light = new THREE.PointLight( 0x00ffffff, 1, 500 );
            light.position.set(30 * Math.cos(deg * Math.PI / 180),  0 , 30 * Math.sin(deg * Math.PI / 180) );
            light.castShadow = true;     
            light.shadow.mapSize.width = 512;  // default
            light.shadow.mapSize.height = 512; // default
            light.shadow.camera.near = 0.5;    // default
            light.shadow.camera.far = 500; 
            light.add(lightSphere);
            scene.add( light );
            console.log(light)
            animate();
        }
        //    创建球体
        function createSphereGeometry(len) {
            var group = new THREE.Group();
            // 添加几何体
            for (var i = 0; i < len; i ++) {
                // var sphereGeometry = new THREE.CylinderBufferGeometry( i / 2, i, 20, 32 );
                var sphereGeometry = new THREE.SphereBufferGeometry(i , 30, 30);
                // 添加材质
                var material = new THREE.MeshStandardMaterial({
                    color: new THREE.Color().setHSL(0.5, 0.5, 0.5),
                    // clipIntersection: true,
                    // clippingPlanes : clipPlane,
                    side: THREE.DoubleSide,
                    // opacity: Math.random(),
                    // transparent: true,
                });
                // 将几何体和材质结合生成网格结构
                var sphere = new THREE.Mesh(sphereGeometry, material);
                var planeMaterial = new THREE.ShadowMaterial();
                planeMaterial.opacity = 0.2;
                var plane = new THREE.Mesh( sphereGeometry, planeMaterial );
                plane.position.y = 50;
                plane.receiveShadow = true;
                group.add( plane );
                // 将网格结构放置于场景中
                group.add(sphere);
            }
            return group;
        }
        
        // var sphereGeometry = new THREE.SphereBufferGeometry(10, 30, 30);
        var deg = 0;
        // 动画效果
        function animate() {
            requestAnimationFrame(animate)
            // camera.position.z = camera.position.z % 100 + 50;
            // camera.position.x = camera.position.x % 
            // camera.rotation.y += 0.1;
            sphere.rotation.y += 0.1;
            // console.log(light)
            deg += 1;
            // lightSphere.position.set( 50 * Math.cos(deg * Math.PI / 180),  0 , 50 * Math.sin(deg * Math.PI / 180));
            light.position.set( 50 * Math.cos(deg * Math.PI / 180),  0 , 50 * Math.sin(deg * Math.PI / 180));
            light.castShadow = true;     
            light.shadow.mapSize.width = 512;  // default
            light.shadow.mapSize.height = 512; // default
            light.shadow.camera.near = 0.5;    // default
            light.shadow.camera.far = 500; 
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            renderer.render(scene, camera);
        }
        
        init();
    </script>
</body>
</html>
